<template>
  <div class="system-role-dialog-container">
    <el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="40%" @close="closeDialog" :close-on-click-modal="false">
      <el-form ref="dialogFormRef" :model="state.formItem.addItem" :rules="state.rules" size="default" label-width="100px"
        v-loading="state.dataLoading" label-position="right" style="width: 90%;text-align: center;">
        <el-form-item label="指标名称" prop="name">
          <el-input type="textarea" v-model="state.formItem.addItem.name" placeholder="请输入指标名称" clearable></el-input>
        </el-form-item>
        <el-form-item label="难度等级">
          <el-select v-model="state.formItem.addItem.level" placeholder="请选择难度等级">
            <el-option label="1" value="1"></el-option>
            <el-option label="2" value="2"></el-option>
            <el-option label="3" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="优先级">
          <el-select v-model="state.formItem.addItem.sort" placeholder="请选择优先级">
            <el-option label="低" value="1"></el-option>
            <el-option label="中" value="2"></el-option>
            <el-option label="高" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="参考信源" prop="refer">
          <el-input type="textarea" v-model="state.formItem.addItem.refer" placeholder="请输入参考信源" clearable></el-input>
        </el-form-item>
        <el-form-item label="price" prop="price">
          <el-input-number v-model="state.formItem.addItem.price" :precision="2" :step="0.1" :max="10" placeholder="请输入单价"></el-input-number>
        </el-form-item>
        <el-form-item label="参考指南" prop="guide">
          <el-input type="textarea" v-model="state.formItem.addItem.guide" placeholder="请输入参考指南" clearable></el-input>
        </el-form-item>
        <el-form-item label="名称" :prop="'dynamicItem.' + index+ '.name'" v-for="(item, index) in state.formItem.dynamicItem" :key="index">
          <el-input v-model="item.name" placeholder="请输入标题" clearable style="width: 40%;"></el-input>
          <div style="width: 20%;">内容:</div>
          <el-input v-model="item.value" placeholder="请输入标题对应的值" clearable style="width: 40%;"></el-input>
        </el-form-item>
        <el-form-item label="展示端">
          <el-button  v-if="state.index == state.formItem.dynamicItem.length" type="primary" size="mini" @click="adminAddItem(state.formItem.dynamicItem.length)">+</el-button>
          <el-button  v-if="state.index !== 0" type="danger" size="mini" @click="deleteItem(item, state.index)">-</el-button>
        </el-form-item>
        <el-divider><span style="color: #F56C6C;">用户需填写区域</span></el-divider>

        <el-form-item label="标题" :prop="'userFilled.' + index+ '.name'" v-for="(item, index) in state.formItem.userFilled" :key="index">
          <el-row style="width: 100% !important;">
            <el-col :span="12">
              <el-input v-model="item.name" placeholder="请输入标题" clearabl ></el-input>
            </el-col>
            <el-col :span="6">
              <div>是否必填:</div>
            </el-col>
            <el-col :span="6">
              <div>
                  <el-radio v-model="item.radio" label="1" >是</el-radio>
                  <el-radio v-model="item.radio" label="0">否</el-radio>
              </div>
            </el-col>
          </el-row>
          <el-row style="width: 100% !important; margin-left: -8%; margin-top: 10 !important;">
            <el-col :span="2">
              <div>备注:</div>
            </el-col>
            <el-col :span="18">
              <el-input v-model="item.remarks" placeholder="请输入备注(选填)" clearabl ></el-input>
            </el-col>
          </el-row>
        </el-form-item>

        <el-form-item label="用户填写端">
          <el-button  v-if="state.userIndex == state.formItem.userFilled.length" type="primary" size="mini" @click="userAddItem(state.formItem.userFilled.length)">+</el-button>
          <el-button  v-if="state.userIndex !== 0" type="danger" size="mini" @click="userDeleteItem(item, state.userIndex)">-</el-button>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="closeDialog()" size="default">取 消</el-button>
          <el-button type="primary" :loading="state.btnLoading" @click="onSubmit(dialogFormRef)"
            size="default">确认</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="systemRoleDialog">
import { normApi } from '/@/api/norm'
import { ElMessage } from 'element-plus';
import { toolsApi } from '/@/api/tools'
// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);

// 定义变量内容
const dialogFormRef = ref();
const router = useRouter();
const state = reactive({
  userId: null,
  index:0,
  userIndex:0,
  apiData: {
		id:'',
	},
  rules: {
    name: [{ required: true, message: '请输入', trigger: 'blur' }],
  },
  dialog: {
    isShowDialog: false,
    title: '',
    submitTxt: '',
  },
  dataLoading: false,
  btnLoading: false,
  // 填写内容及自定义文本框
  formItem: {
        norm_id:'',
        addItem:{
          name:'',
          level:'',
          sort:'',
          refer:'',
          price:'',
          task_id:'',
          guide:'',
        },
        dynamicItem: [
        //默认显示一条
          // {
          //   name: '',
          //   value:''
          // }
        ],
        userFilled: [
        //默认显示一条
          // {
          //   name: '',
          //   radio:'1',
          // }
        ]
  }
});

// 打开弹窗
const openDialog = (norm_id) => {
  state.dialog.isShowDialog = true;
  state.dialog.title = '指标详情';
  state.apiData.id = norm_id;
  state.formItem.norm_id = norm_id;
  // 清空数据
  state.formItem.addItem.name = '';
  state.formItem.addItem.level = '';
  state.formItem.addItem.sort = '';
  state.formItem.addItem.refer = '';
  state.formItem.addItem.price = '';
  state.formItem.addItem.task_id = '';
  state.formItem.addItem.guide = '';
  state.formItem.dynamicItem = [];
  state.formItem.userFilled = [];
  
  normApi().normDetail(state.apiData).then(res => {
		let addItem = res.data.addItem;
    let custom = res.data.custom;
    // 数据详情
    state.formItem.addItem.name = addItem.name;
    state.formItem.addItem.level = addItem.level;
    state.formItem.addItem.sort = addItem.sort+'';
    state.formItem.addItem.refer = addItem.refer;
    state.formItem.addItem.price =addItem.price;
    state.formItem.addItem.task_id= addItem.task_id
    state.formItem.addItem.guide = addItem.guide;
    state.userIndex = 0;
    state.index = 0;
    custom.forEach(item => {
		    if(item.user_filled==1){
          state.formItem.userFilled.push({name:item.extend_name,radio:item.required+"",remarks:item.extend_remarks});
          state.userIndex++
        }else{
          state.formItem.dynamicItem.push({name:item.extend_name,value:item.extend_value});
          state.index++
        }
		});
	}).catch(() => {

	})
};

// 添加自定义文本框
const adminAddItem= (length) => {
      state.formItem.dynamicItem.push({
          name: '',
          value:'',
        })
        state.index++
};
  
// 删除自定义文本框
const deleteItem= (item, index) => {
  alert(index)
  state.formItem.dynamicItem.splice(index-1, 1)
  state.index--
};

// 添加自定义文本框
const userAddItem= (length) => {
      state.formItem.userFilled.push({
          name: '',
          radio:'1',
          remarks:'',
        })
        state.userIndex++
};

// 删除自定义文本框
const userDeleteItem= (item, index) => {
  state.formItem.userFilled.splice(index-1, 1)
  state.userIndex--
};

// 关闭弹窗
const closeDialog = () => {
  state.index=0
  state.userIndex=0
  state.formItem.dynamicItem = [];
  state.formItem.userFilled = [];
  state.formItem.addItem.name = '';
  state.formItem.addItem.level = '';
  state.formItem.addItem.sort = '';
  state.formItem.addItem.refer = '';
  state.formItem.addItem.price = '';
  state.formItem.addItem.task_id= '';
  state.formItem.addItem.guide = '';
  dialogFormRef.value.resetFields();
  state.dialog.isShowDialog = false;
};


// 提交
const onSubmit = () => {
  dialogFormRef.value.validate((valid, fields) => {
    if (valid) {
        let error = 1;
        if(state.formItem.dynamicItem.length==0){
          ElMessage.error('请添加一个展示端的内容！');
          return false;
        }
        if(state.formItem.userFilled.length==0){
          ElMessage.error('请添加一个用户填写端的内容！');
          return false;
        }
        state.formItem.dynamicItem.forEach(itme=>{
          console.log(itme)
          if(itme.name == ""){
            ElMessage.error('请填写展示端标题！');
            error++
            return;
          }
          if(itme.value == ""){
            ElMessage.error('请填写展示端内容！');
            error++
            return;
          }
        })
        state.formItem.userFilled.forEach(itme=>{
          console.log(itme)
          if(itme.name == ""){
            ElMessage.error('请填写用户端标题！');
            error++
            return;
          }
        })
        if(error==1){
          normApi().normEdit(JSON.stringify(state.formItem)).then(res => {
          state.btnLoading = false
          ElMessage.success('操作成功');
          closeDialog();
          emit('refresh');
          }).catch(() => {
            state.btnLoading = false
          closeDialog();
          emit('refresh');
          })
        }
     }

})

};

// 暴露变量
defineExpose({
  openDialog,
});


onMounted(() => {
  if(router.currentRoute.value.query.task_id){
		state.formItem.addItem.task_id = router.currentRoute.value.query.task_id
	}

});
</script>

<style scoped lang="scss">
.el-dialog__body {
 
  display: flex;

  justify-content: center;

  align-content: center;

}
.el-input.is-disabled{
  background:#fff !important;
  color: var(--el-radio-text-color) !important;
  -webkit-text-fill-color: var(--el-radio-text-color) !important;
}
:deep(.el-input .el-input__inner){
  background:#fff !important;
  color: var(--el-radio-text-color) !important;
  -webkit-text-fill-color: var(--el-radio-text-color) !important;
}
:deep(.el-input .el-input__wrapper){
  background:#fff !important;
  color: var(--el-radio-text-color) !important;
  -webkit-text-fill-color: var(--el-radio-text-color) !important;
}
</style>
